import { computed, ComputedRef, onMounted, reactive, ref } from "vue";

// 定义表格数据
export default function useWebxTable(options: UseWebxTableOptions){
  // 查询参数
  const { page:currentPage = 1, size:currentSize = 10 } = options.searchForm || {};
  const { page:defaultPage = 1, size:defaultSize = 10 } = options.defaultSearchForm || {};

  const searchForm = ref<Record<string, any>>({
    page:currentPage,
    size:currentSize,
    ...(options.searchForm || {})
  });
  const total = ref<number>(0);
  const dataSource = ref<any[]>([]);
  const showPagination = computed(() => total.value  > defaultSize);
  const pagination = useWebxTablePagination({
    current: currentPage,
    pageSize: currentSize,
    total:total.value,
    showPagination,
    async onChange(page, pageSize) {
      pagination.currrnt = page;
      pagination.pageSize = pageSize;
      searchForm.value.page = page;
      searchForm.value.size = pageSize;
      await getTableList();
    }
  });

  // 获取表格数据
  const getTableList = async () => {
    const response = await options.api(searchForm.value);
    if(Array.isArray(response)) {
      total.value = response.length;
      dataSource.value = response;
    } else {
      total.value = response.total;
      dataSource.value = response.list;
    }
    // 获取列表结束，重新设置页码属性
    pagination.total = total.value;
  };

  // 获取表格列
  const columns = computed(() => {
    return options.tableColumns.filter(col => col.showFn?.() || true);
  });

  // 刷新
  const onRefresh = async () => await getTableList();
  // 查询
  const onSearch = async () => {
    pagination.currrnt = defaultPage;
    pagination.pageSize = defaultSize;
    await getTableList();
  };
  // 重置
  const onReset = async () => {
    pagination.currrnt = defaultPage;
    pagination.pageSize = defaultSize;
    for (const key in (options.defaultSearchForm || {})) {
      const searchFormKey = key as keyof typeof searchForm.value;
      searchForm.value[searchFormKey] = options.defaultSearchForm?.[key] as (typeof searchForm.value)[typeof searchFormKey];
    }
    await getTableList();
  };

  onMounted(async () => {
    await onSearch();
  })

  return {
    dataSource,
    pagination,
    columns,
    searchForm,
    doRefresh: onRefresh,
    doSearch: onSearch,
    doReset: onReset,
    doCreate: options.onCreate,
    doUpdate: options.onUpdate,
    doDelete: options.onDelete,
  };
};

// 定义分页属性
const useWebxTablePagination = (options: useWebxTablePaginationOptions) => {
  return reactive({
    currrnt: options.current,
    pageSize: options.pageSize,
    total: options.total,
    hideOnSinglePage: true,
    showQuickJumper: true,
    showSizeChanger: true,
    showPagination: options.showPagination || false,
    showTotal: (total: number) => `共 ${total} 条数据`,
    onChange(page: number, pageSize: number) {
      options.onChange(page, pageSize);
    }
  });
};

// 列表入参
export declare interface UseWebxTableOptions {
  // 默认查询参数
  defaultSearchForm?: {
    // 当前页码
    page?: number;
    // 每页条数
    size?: number;
    // 其他查询参数
    [key: string]: unknown;
  };
  // 查询参数
  searchForm: {
    // 当前页码
    page?: number;
    // 每页条数
    size?: number;
    // 其他查询参数
    [key: string]: unknown;
  };
  // 表格列
  tableColumns:any[];
  // 获取表格数据
  api: (searchForm:Record<string, any>) => Promise<ListRes | ListDataRes>;
  // 新增
  onCreate?: (record?:Record<string, any>) => Promise<void>;
  // 新增
  onUpdate?: (record:Record<string, any>) => Promise<void>;
  // 删除
  onDelete?: (record:Record<string, any>) => Promise<void>;
}

// 分页参数
declare interface useWebxTablePaginationOptions {
  // 当前页码
  current: number;
  // 每页条数
  pageSize: number;
  // 总数
  total: number;
  // 是否显示页码
  showPagination: ComputedRef<boolean>;
  // 页码改变回调
  onChange: (page: number, pageSize: number) => void;
}

// 列表响应数据
export declare interface ListRes {
  total: number;
  list: ListDataRes;
  [key:string]: unknown;
};

// 列表数据
export declare type ListDataRes = any[];
